<template>
  <div 
    class="todo-item flex items-center justify-between p-3 border rounded-lg transition-all hover:shadow-sm"
    :class="{ 'opacity-70': todo.completed }"
  >
    <div class="flex items-center gap-3 flex-1">
      <input 
        type="checkbox" 
        v-model="todo.completed" 
        class="w-5 h-5 text-primary rounded focus:ring-primary/50 cursor-pointer"
        @change="handleToggle"
      >
      <span 
        class="todo-text break-words"
        :class="{ 'line-through text-gray-500': todo.completed }"
      >
        {{ todo.text }}
      </span>
    </div>
    <button 
      class="text-gray-400 hover:text-danger transition-colors p-2"
      @click="handleDelete"
    >
      <i class="fa fa-times"></i>
    </button>
  </div>
</template>

<script setup>
import { defineProps, emit } from 'vue';

// 定义接收的props
const props = defineProps({
  todo: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      text: '',
      completed: false
    })
  }
});

// 定义发出的事件
const emit = defineEmits(['toggle-todo', 'delete-todo']);

// 处理任务状态切换
const handleToggle = () => {
  emit('toggle-todo', props.todo.id);
};

// 处理任务删除
const handleDelete = () => {
  emit('delete-todo', props.todo.id);
};
</script>
